<template>
	<div style="width: 90%; margin-left: 5%;">
		<el-divider><i class="el-icon-mobile-phone"> 去哪儿</i></el-divider>
		<el-form style="margin-top: 20px;" :inline="true" label-width="80px">
			<el-form-item label="行程类型">
				<template>
					<el-radio v-model="searchForm.tripTypeRadio" label="1">单程</el-radio>
					<el-radio v-model="searchForm.tripTypeRadio" label="2">往返</el-radio>
				</template>
			</el-form-item>
			<el-form-item label="出发城市">
				<el-input size="small" placeholder="出发城市" v-model="searchForm.startCity">
				</el-input>
			</el-form-item>
			<el-form-item label="抵达城市">
				<el-input size="small" placeholder="抵达城市" v-model="searchForm.arriveCity">
				</el-input>
			</el-form-item>
		</el-form>
		<el-form style="margin-top: 20px;" :inline="true" label-width="80px">
			<el-form-item label="出发日期">
				<el-date-picker :picker-options="pickerOptions" style="width: 100%; height: 90%;"
					v-model="searchForm.startDate" type="date" placeholder="出发日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="返回日期" v-if="searchForm.tripTypeRadio == '2'">
				<el-date-picker :picker-options="pickerOptions" style="width: 100%;" v-model="searchForm.arriveDate"
					type="date" placeholder="返回日期">
				</el-date-picker>
			</el-form-item>
		</el-form>
		<el-form>
			<el-form-item>
				<el-button size="small" type="primary" icon="el-icon-search" @click="searchFly" plain>搜索
				</el-button>
			</el-form-item>
		</el-form>
		<el-divider></el-divider>
		<el-table :data="searchFlytableData" height="450" border style="width: 100%"
			:default-sort="{prop: 'startDate', order: 'descending'}">
			<el-table-column prop="startDate" fixed sortable label="起飞时间" width="180">
			</el-table-column>
			<el-table-column prop="arriveDate" sortable label="抵达时间" width="180">
			</el-table-column>
			<el-table-column prop="startCity" label="出发城市" width="180">
			</el-table-column>
			<el-table-column prop="arriveCity" label="抵达城市" width="180">
			</el-table-column>
			<el-table-column prop="price" label="价格" width="180">
			</el-table-column>
			<el-table-column prop="gds" label="航空公司" width="180">
			</el-table-column>
			<el-table-column label="操作" width="180">
				<!-- 传递参数 -->
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="orderTicket(scope.row)">订票</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-divider><i class="el-icon-mobile-phone"> 机票详情</i></el-divider>
		<el-card style="margin-top: 30px;" shadow="always">
			<el-table :data="tiketTableDataDetails" height="450" border style="width: 100%"
				:default-sort="{prop: 'startDate', order: 'descending'}">
				<el-table-column fixed prop="flightNumber" label="航班号" width="200">
				</el-table-column>
				<el-table-column prop="startCity" label="起飞城市" width="180">
				</el-table-column>
				<el-table-column prop="arriveCity" label="抵达城市" width="180">
				</el-table-column>
				<el-table-column prop="startDate" sortable label="起飞时间" width="180">
				</el-table-column>
				<el-table-column prop="arriveDate" sortable label="抵达时间" width="180">
				</el-table-column>
				<el-table-column prop="gds" label="航空公司" width="180">
				</el-table-column>
				<el-table-column prop="createTime" sortable label="创建时间" width="180">
				</el-table-column>
				<el-table-column prop="updateTime" sortable label="更新时间" width="180">
				</el-table-column>
				<el-table-column prop="price" sortable label="机票价格" width="180">
				</el-table-column>
				<el-table-column prop="ticketLevel" label="机票舱等" width="180">
					<template slot-scope="scope">
						<span v-if="scope.row.ticketLevel == 0">商务舱</span>
						<span v-if="scope.row.ticketLevel == 1">一等舱</span>
						<span v-if="scope.row.ticketLevel == 2">二等舱</span>
						<span v-if="scope.row.ticketLevel == 3">三等舱</span>
						<span v-if="scope.row.ticketLevel == 4">四等舱</span>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="是否售出" width="180">
					<template slot-scope="scope">
						<span v-if="scope.row.status == 0">已经售出</span>
						<span v-if="scope.row.status == 1">未售出</span>
					</template>
				</el-table-column>
				<el-table-column prop="seatNumber" label="座位类型" width="180">
				</el-table-column>
				<el-table-column prop="aircraftNumber" label="客机类型" width="180">
					<template slot-scope="scope">
						<span v-if="scope.row.aircraftNumber == 0">大型客机</span>
						<span v-if="scope.row.aircraftNumber == 1">中型客机</span>
						<span v-if="scope.row.aircraftNumber == 2">小型客机</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="80">
					<!-- 传递参数 -->
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="orderTicketBY(scope.row)">预定</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination style="margin-top: 20px; text-align: right;" background layout="sizes,prev, pager, next"
				:total="alltiketTableDataDetails.length" @size-change="sizeChange" :hide-on-single-page="true"
				@prev-click="prevClick" @next-click="nextClick" @current-change="currentChange">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "WhereGo",
		components: {},
		data() {
			return {
				ticketInfo: {},
				pageSize: 10,
				alltiketTableDataDetails: [],
				tiketTableDataDetails: [],
				searchForm: {
					tripTypeRadio: "1",
					startCity: "",
					arriveCity: "",
					startDate: new Date(),
					arriveDate: null,
				},
				pickerOptions: {
					disabledDate(time) {
						let zero = new Date().setHours(0, 0, 0, 0);
						if (time.getTime() < zero) {
							return true;
						}
						return false;
					}
				},
				searchFlytableData: []
			}
		},
		created() {
			let vm = this
			let searchForm = vm.$cookie.get("searchForm")
			console.log(searchForm)
			if (searchForm == null || searchForm == '') {
				return
			}
			let val = JSON.parse(searchForm)
			vm.searchForm = val
			vm.$cookie.set("searchForm", searchForm, 7)
			// 执行搜索
			vm.searchFly()
		},
		mounted() {},
		methods: {
			searchFly() {
				let vm = this
				vm.searchFlytableData = []
				// 查询之前进行校验
				// 不需要进行检验，如果没有就全部查询 分页暂时不做，比较简单
				axios({
					method: 'post',
					dataType: 'json',
					contentType: 'application/json;charset=UTF-8',
					url: vm.$dev.BASE_URL + '/operation-analysis-service/operationAnalysis/userQueryTicket',
					data: vm.searchForm,
				}).then(function(res) {
					console.log(res)
					if (res.data.success) {
						vm.$message.success(res.data.message);
						vm.searchFlytableData = res.data.data.tickets
						// 搜索成功之后
						vm.$cookie.set("searchForm", JSON.stringify(vm.searchForm), 7)
						vm.alltiketTableDataDetails = []
						vm.tiketTableDataDetails = []
					} else {
						vm.$message.warning(res.data.message);
						vm.$cookie.set("searchForm", JSON.stringify(vm.searchForm), 7)
						vm.alltiketTableDataDetails = []
						vm.tiketTableDataDetails = []
					}
				});
			},
			orderTicket(row) {
				let vm = this
				axios({
					method: 'get',
					url: vm.$dev.BASE_URL +
						'/operation-analysis-service/operationAnalysis/queryAllByFlightNumberNotSellout/' +
						row.flightNumber,
				}).then(function(res) {
					console.log(res)
					if (res.data.success) {
						vm.$message.success(res.data.message);
						vm.alltiketTableDataDetails = res.data.data.tickets
						vm.tiketTableDataDetails = vm.alltiketTableDataDetails.slice(0, vm.pageSize)
					} else {
						vm.$message.warning(res.data.message);
					}
				});
			},
			// 前端分页
			prevClick(e) {
				this.tiketTableDataDetails = this.alltiketTableDataDetails.slice((e - 1) * this.pageSize, e * this
					.pageSize)
			},
			nextClick(e) {
				this.tiketTableDataDetails = this.alltiketTableDataDetails.slice((e - 1) * this.pageSize, e * this
					.pageSize)
			},
			currentChange(e) {
				this.tiketTableDataDetails = this.alltiketTableDataDetails.slice((e - 1) * this.pageSize, e * this
					.pageSize)
			},
			sizeChange(e) {
				this.pageSize = e
				this.tiketTableDataDetails = this.alltiketTableDataDetails.slice(0, this
					.pageSize)
			},
			orderTicketBY(row) {
				let vm = this
				vm.$route.path
				vm.$cookie.set("ticketInfo", JSON.stringify(row), 1)
				vm.$router.push('/OrderBook')
			}
		}
	}
</script>

<style>
</style>
